<template>
	<view class="detail" v-if="loadStatus">
		<view class="item bg-theme">
			<view class="header font28">
				<view class=" flex align-center justify-between">
					<view class="type flex align-center">
						<image :src="detail.icon_image" mode="widthFix" class="mr20"></image>
						<text>{{detail.type_name}}</text>
					</view>
					<view class="amount text-price font32">{{numberFormatter(detail.amount)}}</view>
				</view>
				<view class=" flex align-center justify-between mt20">
					<view>变更前：{{detail.before_amount}}</view>
					<view>变更后：{{detail.after_amount}}</view>
				</view>
			</view>

			<view class="info font28">


				<view class="item flex align-center justify-between" v-if="detail.user_remark">
					<view>付款人</view>
					<view>{{detail.user_remark}}</view>
				</view>

				<view class="item flex align-center justify-between">
					<view>日期</view>
					<view>{{detail.date}}</view>
				</view>


				<view class="item flex align-center justify-between">
					<view>记帐时间</view>
					<view>{{detail.create_time}}</view>
				</view>

				<view class="item flex align-center justify-between">
					<view>资金帐户</view>
					<view>{{detail.account_text}}</view>
				</view>

				<view class="item flex align-center justify-between">
					<view>类型</view>
					<view>{{detail.operation_type_text}}</view>
				</view>

				<view class="item flex align-center justify-between">
					<view>备注</view>
					<view>{{detail.remark}}</view>
				</view>

				<view class="flex justify-start images" v-if="detail.images.length > 0">
					<block v-for="(item, index) in detail.images" :key="index">
						<view class="item">
							<image :src="item" mode="aspectFill" @tap="preview_image(index)"></image>
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="flex flex-direction mt30" v-if="userInfo.id == detail.user_id">
			<navigator :url="'/pages/index/add?id='+id" class="cu-btn bg-theme round lg">编辑</navigator>
		</view>
		
		<view class="flex flex-direction mt30" v-if="userInfo.id == detail.user_id">
			<u-button type="error" @tap="onDel()">删除</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import FundModel from '@/models/FundsModel.js'
import accountModel from '../../models/AccountModel';

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				loadStatus: false,
				id: '',
				detail: {}
			}
		},
		async onLoad(options) {
			this.id = options.id;
			uni.showLoading();
			await this.get_detail()
			this.loadStatus = true;
			uni.hideLoading();

		},
		methods: {
			async get_detail(callback) {
				let that = this;
				const res = await FundModel.detail(that.id)
				if (res.code == 200) {
					that.detail = res.data;
				} else {
					that.$base.alert(res.msg, () => {
						uni.navigateBack()
					})
				}
			},
			preview_image(index) {
				uni.previewImage({
					current: index,
					urls: this.detail.images
				})
			},
			onDel() {
				uni.showModal({
					title: "确认删除吗?",
					success: (res) => {
						
						if(res.confirm) {
							uni.showLoading({
								mask: true
							})
							FundModel.del(this.id).then(res => {
								uni.hideLoading()
								this.$base.msg(res.msg)
								if(res.code == 200) {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.detail {
		padding: 20upx;


		.item {
			border-radius: 20upx;
			padding: 20upx;

			.header {
				padding-bottom: 20upx;
				border-bottom: 1upx dashed #eee;

				image {
					width: 60upx;
					height: 60upx;

				}
			}

			.images {
				image {
					width: 200upx;
					height: 200upx;
				}
			}
		}
	
		.mt30{
			margin-top: 30rpx;
		}
		
		.cu-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			border-radius: 10rpx;
			color: #fff;
		}
	}
</style>